<template>
  <div class="app-container">
    <div class="about-wrapper">
      <div class="left-box">
        <div class="base-info">
          <img :src="$baseUrl + userInfo.avatar" alt="">
          <div class="user-area">
            <h3 style="margin:0">{{userInfo.name}}</h3>
            <div class="sub-info">
              <span>{{userInfo.email}}</span>
              <span style="margin-left: 24px">{{userInfo.address}}</span>
            </div>
          </div>
          <el-button type="success" plain @click="toEdit">编辑信息</el-button>
        </div>
        <div class="record">
          <h3 style="margin-top:0">投递记录</h3>
          <div class="record-item" v-for="item in recordList" :key="item.id">
            <div>
              <span>投递编号--</span>
              <span>{{item.record_num}}</span>
            </div>
            <div>
              <span>投递小区--</span>
              <span>{{item.estate}}</span>
            </div>
            <div>
              <span>垃圾桶编号--</span>
              <span>{{item.dustbin.device_code}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="right-box">
        <h3 style="margin-top:0">个人成就</h3>
        <div class="count">投递次数：{{total}}</div>
        <div class="integral">所的积分： {{userInfo.integral_count}}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'About',
  data() {
    return {
      userInfo: {},
      recordList: [],
      total: null,
      currentPage: 1,
      pageSize: 10
    }
  },
  mounted() {
    this.getUserInfo()
    this.getRecordList(this.currentPage, this.pageSize)
  },
  methods: {
    toEdit() {
      this.$router.push('/settings')
    },
    async getUserInfo() {
      const res = await this.$http.get("/users/userInfo");
      this.userInfo = res.data;
    },

    async getRecordList(offset, limit) {
      const res = await this.$http.get(`/users/recordList?offset=${offset}&limit=${limit}`)
      this.recordList = res.data.rows
      this.total = res.data.count
    }
  }
}
</script>
<style lang="less" scoped>
@import '../assets/style/about.less';
</style>
